<template>
	<view>
		<u-navbar :border-bottom="false" title="注销账号" :title-size="36" :title-bold="true" :title-color="textColor" :background="{background: bgColor}">
		</u-navbar>
		<login-bk />
		<view class="input-box">
			<u-form :model="form" :rules="rules" ref="zhuxiaoForm" :error-type="['toast']">
				<!-- <u-form-item prop="validCode">
					<image src="/static/login/jiaoyanma.png" class="label-img" mode=""></image>
					<u-input v-model="form.validCode" placeholder="请输入校验码" />
					<ak-valid-code slot="right" ref="validCode" @changeCode="changeValidCode" />
				</u-form-item> -->
				<u-form-item prop="mobile">
					<image src="/static/login/shoujihao.png" class="label-img" mode=""></image>
					<u-input v-model="form.mobile" :disabled="true" placeholder="请输入手机号" />
				</u-form-item>
				<u-form-item prop="mobileCode">
					<image src="/static/login/yanzhengma.png" class="label-img" mode=""></image>
					<u-input v-model="form.mobileCode" placeholder="请输入验证码" :maxlength="6"/>
					<ak-get-code :is-ids="false" :mobile="form.mobile" :is-valid="isValid" />
				</u-form-item>
			</u-form>
		</view>
		<!-- 登录按钮 -->
		<login-bt text="注销" class="u-m-t-80" @click="handleZhuxiao" />
		<u-modal v-model="logOffShow"  :title="'温馨提示'" @confirm="logOffFn">
			<view class="u-text-center u-p-25 u-font-28">
				您确定要注销账号吗？<br />
				一旦账户注销成功您的账号将无法登录与使用,<br />
				您的账号信息与会员权益将会永久清除且无法恢复,<br />
				您的账号所关联的订单将无法查询与找回,<br />
				您所绑定手机号码将无法再次注册
			</view>
		</u-modal>
	</view>
</template>

<script>
	import LoginBk from '@/pages/login/components/loginBk.vue'
	import LoginBt from '@/pages/login/components/loginBt.vue'
	import akGetCode from '@/components/ak-get-code/index.vue'
	export default {
		components: { LoginBk, LoginBt, akGetCode },
		data() {
			return {
				logOffShow:false,
				form: {
					// mobile: this.$store.state.user.user.phoneNumber,
					mobileCode: ''
				},
				rules: {
					mobileCode: [
						{ required: true, message: '验证码必填', trigger: 'blur'}
					],
					// validCode: [
					// 	{ required: true, message: '校验码必填', trigger: 'blur'},
					// 	{
					// 		// 自定义验证
					// 		validator: (rule, value, callback) => {
					// 			return this.validCode.toLowerCase() == value.toLowerCase()
					// 		},
					// 		message: '验证码错误',
					// 		trigger: 'blur'
					// 	}
					// ],
					mobile: [
						{
							required: true,
							message: '请输入手机号',
							trigger: ['change','blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['blur'],
						}
					]
				}
			}
		},
		onReady() {
			this.$refs.zhuxiaoForm.setRules(this.rules);
			// this.$refs.validCode.init()
		},
		computed: {
			isValid() {
				let obj = {
					isSend: true,
					msg: ''
				}
				// let isValid = this.validCode.toLowerCase() == this.form.validCode.toLowerCase()
				let isMobile = this.$u.test.mobile(this.form.mobile);
				if (!isMobile) {
					obj = {
						isSend: false,
						msg: '手机号不正确'
					}
				}
				// if (!isValid) {
				// 	obj = {
				// 		isSend: false,
				// 		msg: '校验码错误'
				// 	}
				// }
				return obj
			}
		},
		methods: {
			async logOffFn(){
				uni.showLoading({
					title: '注销中'
				});
				// 发送请求
				const params = {
					phoneNumber: this.form.mobile,
					smsCode: this.form.mobileCode
				};
				// 获取token
				const info = await this.$http.post('api/User/LogOff', params);
				// this.$store.dispatch('user/logout');
				uni.hideLoading();
				this.$u.toast('注销成功', 1000, 'success');
				this.$mHelper.delayedJump('/pages/index/index', 'reLaunch');
			},
			handleZhuxiao() {
				this.$refs.zhuxiaoForm.validate(async (valid) => {
					if (valid) {
						this.logOffShow = true;
					}
				});
			}
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
	.input-box {
		padding: 0 70rpx;
	}
	.codeView {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	.label-img {
		width: 40rpx;
		height: 46rpx;
		margin-right: 24rpx;
	}
	
</style>